<template>
  <!-- 顶部标题 -->
  <view class="Login">
    <view class="Login1">
      <view class="Login1-2">
        <image class="logo" src="/src/static/log/LoginLogo.png" @click="tiaozuan"></image>
        <!-- <img src="/src/static/log/LoginLogo.png" alt="" /> -->
      </view>
      <view class="Login1-3">
        <text class="Login1-3-text">防差错配料系统</text>
      </view>
      <view class="Login1-4">
        <view class="Login1-4-0">
          <view class="Login1-4-1">
            <image src="/src/static/icon/use.png" style="width: 40px; height: 40px"></image>

            <!-- <uni-easyinput type="password" 
							></uni-easyinput> -->
            <input class="uni-input" placeholder="带清除按钮的输入框" :value="use" @input="clearInput" />
            <image class="password-icon fixed-size-as  " :src="showClearIcon ? '/static/icon/svg/close.svg' : ''"
              @click="clearIcon" mode="widthFix"></image>
          </view>
          <view class="Login1-4-1">
            <image src="/src/static/icon/pad.png" style="width: 40px; height: 40px"></image>

            <input class="uni-input  fixed-size-input" placeholder="请输入密码" :value="pad"
              :password="showPassword"></input>
            <image class="password-icon"
              :src="showPassword ? '/static/icon/svg/eye-close.svg' : '/static/icon/svg/eye-clos.svg'"
              @click="changePassword" mode="widthFix"></image>

          </view>
        </view>
      </view>
      <view class="Login1-5">
        <checkbox-group>
          <checkbox value="psw" color="#09CC86" />记住账号密码
        </checkbox-group>
      </view>
      <view class="Login1-6">
        <button class="Login1-6-button">登录</button>
      </view>
      <view class="Login1-7">
        <view class="Login1-7-1">
          <image src="/src/static/icon/system2.png" style="width: 17px; height: 17px; margin-right: 5px"></image>
          <view class="Login1-7-text1"> 忘记密码</view>
        </view>
        <view class="Login1-7-3">|</view>
        <view class="Login1-7-2">
          <image src="/src/static/icon/system3.png" style="width: 30px; height: 30px"></image>
          <view class="Login1-7-text2">注册账号</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
let use = ref<string>(""); // 定义一个响应式变量 value，用于绑定输入框的
let showClearIcon = ref<boolean>(false);//清除账号图标
const clearIcon = function () {
  use.value = '';
  showClearIcon.value = false;
};

const clearInput = (event: any) => {
  use.value = event.detail.value;
  if (event.detail.value.length > 0) {
    showClearIcon.value = true;
  } else {
    showClearIcon.value = false;
  }
};
//密码
let pad = ref<string>(""); // 定义一个响应式变量 pad，用于绑定输入框的密码
let showPassword = ref<boolean>(true);//密码图标
const changePassword = () => {
  showPassword.value = !showPassword.value;
};

//用于跳转到另一个登录页
const tiaozuan=()=>{
  // uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
  uni.navigateTo({
    url: '/pages/Login/Login1' 
  });

  // uni.redirectTo: 关闭当前页面，跳转到应用内的某个页面
  // uni.redirectTo({
  //   url: '/pages/otherPage/otherPage' 
  // });

  // uni.reLaunch: 关闭所有页面，打开到应用内的某个页面
  // uni.reLaunch({
  //   url: '/pages/otherPage/otherPage' 
  // });

  // uni.switchTab: 跳转到tabBar页面，并关闭其他所有非tabBar页面
  // uni.switchTab({
  //   url: '/pages/tabBarPage/tabBarPage' 
  // });

  // uni.navigateBack: 关闭当前页面，返回上一页面或多级页面
  // uni.navigateBack({
  //   delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
  // });
}
</script>

<style scoped>
.Login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* margin-top: 40px; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /* justify-content: center; */
  min-height: 100vh;
  background-color: green;
  background-image: url("@/static/log/Loginbg3.png");
  background-size: 100% 100%;
}

.Login1 {
  background-color: #f8f3f1;
  width: 326px;
  height: 500px;
  margin-top: 77px;
  border-radius: 20px;
  opacity: 0.9;
  /* 0~1之间，越小越透明 */


}

.Login1-2 {
  /* background-color: darkcyan; */
  height: 125px;
  border-radius: 20px;
}

.logo {
  margin: 3vh 5vh;
  width: 241px;
  height: 75px;
  border-radius: 20px;
}

.Login1-3 {
  display: flex;
  /* background-color: aqua; */
  width: 100%;
  height: 75px;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
}

.Login1-3-text {
  /* font-size: 32rpx; */
  font-size: 25px;
  color: #536d6c;
  transform: scaleX(1.2);
  /* 水平方向拉长1.5倍 */
  letter-spacing: 2px;
}

.Login1-4 {
  /* background-color: mediumseagreen; */
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
  /* 水平居中 */
}

.Login1-4-0 {
  /* background-color: #fff; */
  width: 265px;
  height: 125px;
  /* display: flex; */
  /* flex-direction: row; */
}

.Login1-4-1 {
  /* background-color: red; */
  width: 265px;
  height: 64px;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  position: relative;
  /* 相对定位：作为图标的参考坐标系 */
  padding: 0 10px;
  /* 容器内边距 */
}

.uni-input {
  padding-left: 10px;
  padding-right: 30px;
  width: 60%;
  height: 40px;
  border: 1px solid #838383;
  border-radius: 20px;
}

.fixed-size-input {
  min-width: 200px;
  /* 最小宽度，防止过小 */
  box-sizing: border-box;
  /* 重要：让padding和border包含在width内 */
  font-family: system-ui, -apple-system, sans-serif;
  /* 使用系统字体，确保一致性 */
  padding-right: 37px;
}

.password-icon {
  width: 24px;
  /* 图标宽度 */
  height: 24px;
  /* 图标高度 */
  position: absolute;
  /* 绝对定位，让图标可以放在输入框内 */
  right: 42px;
  /* 距离输入框右侧15px */
  top: 50%;
  /* 垂直方向居中对齐 */
  transform: translateY(-50%);
  /* 精确居中，就像把地图贴在正中间 */
  color: #838383;
}

.Login1-5 {
  /* background-color: peru; */
  height: 50px;
  padding-top: 15px;
  padding-left: 25px;
}

.Login1-6 {
  /* background-color: bisque; */
  width: 100%;
  height: 10%;
}

.Login1-6-button {
  width: 265px;
  height: 45px;
  background-color: #5993dd;
  border-radius: 20px;

  color: #fff;
}

.Login1-7 {
  /* background-color: darkcyan; */
  height: 50px;
  display: flex;
  justify-content: space-between;
  /* 两个子元素之间的间距 */
}

.Login1-7-1 {
  width: 155px;
  height: 50px;
  /* background-color: greern; */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* 两个子元素之间的间距 */
  /* justify-content: space-between;  */

  justify-content: flex-end;
}

.Login1-7-3 {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  width: 16px;
  height: 50px;
}

.Login1-7-2 {
  width: 155px;
  height: 50px;
  background-color: greern;
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

.Login1-7-text1 {
  margin-right: 11px;
}
</style>
